<template>
  <view class="padding-sm">
    <!-- 导航栏 -->
    <view class="app-header">
      <view class="operation-bar cu-bar bg-white">
        <view class="action">
          <text class="cuIcon-titles text-cyan"></text>
          <text class="text-xl text-bold">BMI分析</text>
        </view>
      </view>
    </view>

    <!-- app-body -->
    <view class="app-body" v-if="data && data.bmi">
      <uni-section class="mb-10" title="成年人身体质量指数" sub-title="身体质量指数，即BMI指数，简称体质指数，是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。">
        <template v-slot:decoration>
          <view class="decoration"></view>
        </template>
        <uni-table ref="table" border>
          <uni-tr>
            <uni-th width="100" align="center">轻体重BMI</uni-th>
            <uni-th width="120" align="center">健康体重BMI</uni-th>
            <uni-th width="100" align="center">超重BMI</uni-th>
            <uni-th width="100" align="center">肥胖BMI</uni-th>
          </uni-tr>
          <uni-tr>
            <uni-td align="center">
              <view>BMI{{'<'}}18.5</view>
            </uni-td>
            <uni-td align="center">
              <view>18.5<=BMI{{'<'}}24</view>
            </uni-td>
            <uni-td align="center">
              <view>24<=BMI{{'<'}}28</view>
            </uni-td>
            <uni-td align="center">28≤BMI</uni-td>
          </uni-tr>
        </uni-table>
      </uni-section>

      <view style="height: 20px;" />

      <!-- 我的体质指数 -->
      <uni-section class="mb-10" title="我的体质指数" sub-title="通过我的身高和体重得出体质指数BMI">
        <template v-slot:decoration>
          <view class="decoration"></view>
        </template>
        <uni-table ref="table" border>
          <uni-tr>
            <uni-th width="100" align="center">身高</uni-th>
            <uni-th width="120" align="center">体重</uni-th>
            <uni-th width="100" align="center">我的BMI</uni-th>
            <uni-th width="100" align="center">BMI分析</uni-th>
          </uni-tr>
          <uni-tr>
            <uni-td align="center">{{ data.height }}cm</uni-td>
            <uni-td align="center">{{ data.weight }}kg</uni-td>
            <uni-td align="center">{{ data.bmi }}</uni-td>
            <uni-td align="center" v-if="data.bmi < 18.5">
              <view class='cu-tag light bg-yellow'>体重偏轻</view>
            </uni-td>
            <uni-td align="center" v-else-if="data.bmi < 24">
              <view class='cu-tag light bg-green'>体重正常</view>
            </uni-td>
            <uni-td align="center" v-else-if="data.bmi < 28">
              <view class='cu-tag light bg-green'>体重偏重</view>
            </uni-td>
            <uni-td align="center" v-else>
              <view class='cu-tag light bg-green'>肥胖</view>
            </uni-td>
          </uni-tr>
        </uni-table>
      </uni-section>
    </view>
    
    <!-- 没有数据 -->
    <view v-else>
      <empty-page container-height="100px" text="暂无BMI信息" />
    </view>

  </view>
</template>

<script>
  export default {
    onLoad() {
      this.init();
    },
    methods: {
      // 初始化数据
      async init() {
        // 发起请求
        const {
          data: res
        } = await uni.$http.get('/bmi/evaluation')
        // 判断是否获取失败
        if (res.code !== 200) return uni.$showMsg();
        this.data = res.data;
        console.log(this.data);
      }
    },
    data() {
      return {
        data: null
      };
    }
  }
</script>

<style lang="scss">
  .decoration {
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #1cbbb4;
  }

  .app-header {
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 5px;
    height: 60px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 999;
  }
</style>